import { Button } from "antd"
import React from "react"
import { useState } from "react"
import { Father } from './useMemoPage'
import { Search, SearchBox } from './useCallbackPage'
const MemoPage: React.FC = () => {
    const [count, setCount] = useState(0)
    return (<>
        <h1>React.memo</h1>
        <Button onClick={() => setCount((pre) => pre + 1)}>+1</Button>
        <span>{count}</span>
        <Child1 count={count}></Child1>
        <Child2></Child2>
    </>)
}
const Child1: React.FC<{ count: number }> = React.memo(({ count }) => {
    console.log('执行了Child1');
    return (<>
        <span>Child1{count}</span>
        <Child3></Child3>
    </>)
})

const Child2: React.FC = React.memo(() => {
    console.log('执行了Child2');
    return (<>
        <span>Child2</span>
    </>)
})
const Child3: React.FC = () => {
    console.log('执行了Child3');
    return (<><span>Child3</span></>)
}

export default () => (
    <>
        <MemoPage></MemoPage>
        <hr />
        <Father></Father>
        <hr />
        <SearchBox></SearchBox>
    </>
) 